<template>
    <div class="c-gauge">
        <canvas></canvas>
        <div class="flex-wrap" style="margin-bottom: 10px">
            <div class="card"><span class="dot" style="background-color: mediumseagreen;"></span>第一阶梯</div>
            <div class="card"><span class="dot" style="background-color: sandybrown;"></span>第二阶梯</div>
            <div class="card"><span class="dot" style="background-color: orangered;"></span>第三阶梯</div>
        </div>
    </div>
</template>
<script>
    import {RadialGauge} from 'canvas-gauges'

    export default {
        data() {
            return {
                gauge: '',
                ladder: {
                    volumeFirst: app.util.localStorage('user.ladderVolumeFirst') ? app.util.localStorage('user.ladderVolumeFirst') : 0,
                    volumeSecond: app.util.localStorage('user.ladderVolumeSecond') ? app.util.localStorage('user.ladderVolumeSecond') : 144,
                    volumeThree: app.util.localStorage('user.ladderVolumeThree') ? app.util.localStorage('user.ladderVolumeThree') : 204
                }
            }
        },
        props: {
            keyword: {
                type: String,
                default: 'id'
            },
            value: {
                type: Number,
                default: 0
            }
        },
        computed: {
            majorTicks: function () {
                let maxValue = this.ladder.volumeSecond + this.ladder.volumeThree;
                let minValue = this.ladder.volumeFirst;
                let value = (maxValue - minValue) / 10;
                let data = [];
                for (let i = 0; i < 10; i++) {
                    let val = (value * i).toFixed(2);
                    data.push(val);
                }
                data.push('');

                return data
            }
        },
        methods: {
            init() {
                this.gauge = new RadialGauge({
                    renderTo: document.getElementsByTagName('canvas')[0],
                    width: "300",
                    height: "300",

                    //整个仪表盘背景颜色
                    colorPlate: "#F0F0F0",
                    // colorPlateEnd:'black',

                    //整个表盘外层border
                    borders: true,
                    borderOuterWidth: 4,
                    colorBorderOuter: 'rgba(216,216,216,1)',
                    colorBorderOuterEnd: 'rgba(170,170,170,1)',
                    borderMiddleWidth: 4,
                    colorBorderMiddle: 'rgba(250,250,250,.7)',
                    colorBorderMiddleEnd: 'rgba(240,240,240,1)',
                    borderInnerWidth: 4,
                    colorBorderInner: 'rgba(250,250,250,1)',
                    colorBorderInnerEnd: 'rgba(205,205,205,1)',
                    borderShadowWidth: 5,
                    colorBorderShadow: 'rgba(0,0,0,.6)',

                    // 进度条宽度
                    barWidth: 2,
                    colorBar: 'rgba(0,0,0,.1)',
                    colorBarProgress: 'rgba(0,0,255,.6)',//进度条加载颜色
                    barShadow: 2,
                    colorBarShadow: 'yellow',

                    //刻度线
                    exactTicks: false,//是否10刻度
                    minorTicks: 2,//刻度划分个数
                    strokeTicks: false,//是否显示最外层刻度线
                    colorMajorTicks: '#f5f5f5',//大刻度颜色
                    colorMinorTicks: '#ddd',//小刻度颜色
                    highlightsWidth: 8,

                    //刻度值
                    fontNumbersSize: 14,//刻度值字体大小
                    colorNumbers: 'rgba(0, 0, 0, .8)',//刻度值颜色
                    minValue: this.ladder.volumeFirst,
                    maxValue: this.ladder.volumeSecond + this.ladder.volumeThree,
                    majorTicks: this.majorTicks,
                    highlights: [
                        {
                            "from": this.ladder.volumeFirst,
                            "to": this.ladder.volumeSecond,
                            "color": "rgba(24, 189, 155, 1)"
                        },
                        {
                            "from": this.ladder.volumeSecond,
                            "to": this.ladder.volumeThree,
                            "color": "rgba(253, 194, 2, 1)"
                        },
                        {
                            "from": this.ladder.volumeThree,
                            "to": this.ladder.volumeSecond + this.ladder.volumeThree,
                            "color": "rgba(254, 102, 53, 1)"
                        }
                    ],

                    //标题
                    title: '年累计用水量',
                    fontTitleSize: 18,
                    colorTitle: 'rgba(0, 0, 0, .8)',
                    //单位
                    units: "m³",
                    colorUnits: 'rgba(0, 0, 0, .5)',
                    //值
                    value: this.value,
                    valueInt: 5,//整数个数
                    valueDec: 2,//两位小数
                    fontValue: "Monospace",//字型
                    fontValueWeight: 'bolder',
                    colorValueText: 'rgba(0, 0, 0, .8)',
                    colorValueTextShadow: 'rgba(0, 0, 0, .2)',
                    //value值框
                    valueBox: true,//是否显示框
                    colorValueBoxBackground: "#F0F0F0",
                    colorValueBoxRect: "#F0F0F0",
                    // colorValueBoxRectEnd: 'white',
                    colorValueBoxShadow: 'black',

                    // 指针
                    colorNeedle: 'rgba(254,102,53,1)',//指针头部颜色
                    colorNeedleEnd: 'blue', //指针尾部颜色
                    needleType: "arrow",
                    needleWidth: 3,
                    needleCircleSize: 8, //中心圆点
                    needleCircleOuter: true,
                    colorNeedleCircleOuter: 'rgba(83, 83, 83, 1)',//中心点外圆颜色
                    colorNeedleCircleOuterEnd: 'rgba(102, 102, 102, 1)',
                    needleCircleInner: true,
                    colorNeedleCircleInner: 'rgba(254,102,53,1)',//中心点内圆颜色
                    colorNeedleCircleInnerEnd: 'yellow',

                    //动画
                    // animatedValue: true,//是否开启value值动画
                    // animateOnInit: true, //是否开启动画
                    // animationDuration: 3000,
                    // animationRule: "bounce"
                }).draw();

                setInterval(() => {
                    this.gauge.value = this.value;
                }, 500);
            }
        },
        mounted() {
            this.init();
        }
    }
</script>
